<template>
  <view class="content">
    <s-pull-scroll ref="pullScroll"  :back-top="true" :autoPullUp="true" :pullDown="pullDown" :pullUp="loadData" :emptyText="emptyText">
		<!-- <view class="textBox">
			aaaa
		</view> -->
    <waterfallsFlow :list="list" ref="waterfallsFlow">
      <!--  #ifdef  MP-WEIXIN -->
      <view v-for="(item, index) of list" :key="index" slot="slot{{index}}">
        <view class="cnt">
          <view class="title">{{ item.title }}</view>
        </view>
      </view>
      <!--  #endif -->

      <!-- #ifndef  MP-WEIXIN -->
      <template v-slot:default="item">
        <view class="cnt">
          <view class="title">{{ item.title }}</view>
        </view>
      </template>
      <!-- #endif -->
    </waterfallsFlow>
	</s-pull-scroll>
  </view>
</template>

<script>
import waterfallsFlow from "@/components/maramlee-waterfalls-flow/maramlee-waterfalls-flow.vue";
import silbList from "@/components/sib-list/sib-list.vue";
export default {
  components: { waterfallsFlow,silbList},
  data() {
    return {
		 list:[],
		 curPage:1,
		 total:''
    };
  },
  onLoad() {
    this.silbListRefresh()
  },
  methods:{
	  silbListRefresh () {
	    this.$nextTick(() => {
	      this.$refs.pullScroll.refresh();
	    });
	  },
  	//下拉刷新
  	pullDown(pullScroll){
		   this.curPage=0
		   this.$refs.waterfallsFlow.refresh();
		   this.list=[]
  		   this.loadData(pullScroll);
  	},
  	//上拉加载
  	loadData(pullScroll){
  		setTimeout(()=>{
			this.curPage++
  			this.getBookPage(pullScroll)
  		},500)
  	},
	getBookPage(pullScroll){
		uni.request({
			url:`http://192.168.1.198:9588/api/app/book/index/getChildCategoryBookList/${this.curPage}/6/1`,
			method:'GET',
			success:(res=>{
				this.total=res.data.data.total
				if(this.curPage===1){
					console.log(1)
					this.list=res.data.data.rows
				}else{
					console.log(2)
					this.list=this.list.concat(res.data.data.rows)
				}
				if(this.total===0){
					pullScroll.empty();  //表示为空 
				}else if(this.list.length>=this.total){
					 pullScroll.finish(); //表示全部加载完毕
				}else{
					pullScroll.success(); // 表示加载成功
				}
			})
		})
		// 
			
		
		
	}
  }
}

</script>
<style>
page {
  background-color: #eee;
}
</style>
<style lang="scss" scoped>
.content {
  .cnt {
    .title {
      font-size: 16px;
    }
    .text {
      font-size: 14px;
      margin-top: 5px;
    }
  }
  .textBox{
  	width: 99%;
  	height: 300upx;
  	border: 1px solid red;
  }
}
</style>
